import React, { useEffect, useState } from 'react'
import api from '../../api/axios'
import { Card, IndexBar, List, Tag } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { useParams ,useNavigate} from 'react-router-dom'
import { pode } from '../../store/CitySlice'
function City() {
  const [list, setList] = useState([])
  const [hearlist, setHearlist] = useState([])
  const dispatch = useDispatch()
  const {type} = useParams()
  const Navigate = useNavigate()
  const getData = async () => {
    const res = await api.get('/api/city')
    const { code, data } = res.data
    console.log(data)
    if (code == 200) {
      setList(data.city)
      setHearlist(data.hotCities)
    }
  }
  const go=(city)=>{
    dispatch(pode(({city,type})))
    Navigate('/')
  }
  useEffect(() => {
    getData()
  }, [])
  return (
    <div>
      <Card title={'热门城市'}>
        {
          hearlist.length > 0 && hearlist.map((item, ind) => (
            <Tag key={ind}>
              {item.name}
            </Tag>
          ))
        }
      </Card>
      <Card title={'城市列表'}>
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {list.length > 0 && list.map(item => {
              return (
                <IndexBar.Panel
                  index={item.initial}
                  title={`${item.initial}`}
                  key={`${item.initial}`}
                >
                  <List>
                    {item.list.map((item, index) => (
                      <List.Item onClick={()=>go(item.name)} key={index}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  )
}

export default City
